<template>
    <el-dialog title="选择成分材料"
        class='product-dialog'
        append-to-body
        width='1200px'
        @close="closeEvt"
        :visible.sync="show">
        <page-layout>
            <template v-slot:header>
                <el-input v-model="query.name" placeholder="输入产品名字查询" size='small'/>
                <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            </template>

            <el-table :data="tableData"
                style="width: 100%"
                height="100%"
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                size='small'>
                <el-table-column type="selection" width="55" fixed/>
                <el-table-column prop="name" label="产品名字" width="180" fixed/>
                <el-table-column prop="type" label="类型" width="180">
                    <template v-slot="data">
                        <div>
                            {{data.row.type | typeFilter([])}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="级别" width="180">
                    <template v-slot="data">
                        <div>
                            {{data.row.level | typeFilter([])}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="brand" label="品牌" width="180"/>
                <el-table-column prop="place" label="产地"
                    show-overflow-tooltip width="260"/>
                <el-table-column prop="price" label="售价" width="180"/>
                <el-table-column prop="remark" label="备注"
                    :show-overflow-tooltip="true" width="320"/>
            </el-table>

            <template v-slot:footer>
                <el-pagination :page-sizes="[20, 50, 100, 150]"
                    :page-size="query.size"
                    :current-page="query.page"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"/>
            </template>
        </page-layout>
        <template v-slot:footer>
            <el-button size='small' @click="closeEvt">取 消</el-button>
            <el-button size='small' type="primary" @click="confirmEvt">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { productListApi } from '@/apis/productApi'
    export default {
        props: {
            value: {
                type: Boolean,
                required: true
            }
        },

        watch: {
            value(val) {
                this.show = val
            }
        },

        data() {
            return {
                show: false,
                tableData: [],
                query: {
                    name: '',
                    page: 1,
                    size: 20
                },
                total: 0,
                timer: null,
                selectedRows: [],
                loading: true
            }
        },

        mounted() {
            this.getList()
        },

        methods: {
            closeEvt() {
                this.$emit('input', false)
            },
            queryEvt() {
                this.query.page = 1
                this.getList()
            },
            async getList() {
                this.loading = true
                let result = await productListApi(this.query)
                if (result.code === 200) {
                    this.tableData = result.data.rows
                    this.total = result.data.count

                    setTimeout(() => {
                        // Uncaught TypeError: Cannot read properties of undefined (reading 'toggleRowSelection')
                        
                        if (!!this.$refs.multipleTable) {
                            this.selectedRows.forEach(it => {
                                // 在tableData数据中找到当前行数据，然后调用方法设置被选中
                                let row = this.tableData.find(oo => oo.id === it.id)
                                // 因为调用toggleRowSelection方法会触发表格的@selection-change事件，会导致赋值错误
                                // 所以可以这样做，在页面切换就是发送页面请求初始化调用toggleRowSelection，不要给selectedRows数据赋值
                                if (!!row) this.$refs.multipleTable.toggleRowSelection(row, true)
                            })
                        }
                        
                        // 设置页面选中状态，并且完成渲染之后再把节流标识放开
                        setTimeout(() => {
                            this.loading = false
                        }, 100)
                    })
                }
            },
            fd() {
                if (this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    this.getList()
                }, 100)
            },
            sizeChange(size) {
                this.query.size = size
                this.fd()
            },
            currentChange(page) {
                this.query.page = page
                this.fd()
            },
            handleSelectionChange(rows) {
                // 这里发生变化的时候，要注意，如果selectedRow包含了数据，但是rows里边没有这条数据了，那么表示这条数据被删除了
                // 一定要注意，这条数据一定是当前页的数据
                // 把本页的所有选中的数据先删除掉

                if (!this.loading) {
                    console.log('---------------------------- handleSelectionChange')
                    this.tableData.forEach(it => {
                        let idx = this.selectedRows.findIndex(oo => oo.id === it.id)
                        if (idx > -1) this.selectedRows.splice(idx, 1)
                    })
                    this.selectedRows = this.selectedRows.concat(rows)
                }
            },
            confirmEvt() {
                this.$emit('pickDataEvt', this.selectedRows)
                this.$emit('input', false)
            }
        }
    }
</script>